<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    
    <title>登录Summer系统</title>
    <meta name="description" content="Summer后台管理框架">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.css" th:href="@{/css/style.css}" rel="stylesheet"/>
    <link href="../static/css/login.min.css" th:href="@{/css/login.min.css}" rel="stylesheet"/>
    <link href="../static/summer/css/summer-ui.css" th:href="@{/summer/css/summer-ui.css?v=4.0.0}" rel="stylesheet"/>
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
    <link rel="shortcut icon" href="../static/favicon.ico" th:href="@{favicon.ico}"/>
    <style type="text/css">
    	label.error { position:inherit;  }
    	#bg {
		    position: fixed;
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100%;
		    z-index: -1;
		}
		#bg canvas {
		    position: absolute;
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100%
		}
    </style>
    <script>
        if(window.top!==window.self){window.top.location=window.location};
    </script>
</head>

<body class="signin">
	<div id="bg">
            <canvas></canvas>
            <canvas></canvas>
            <canvas></canvas>
        </div>
    <div class="signinpanel">
        <div class="row">
            <div class="col-sm-7">
                <div class="signin-info">
                    <div class="logopanel m-b">
                        <h1><img alt="[ LOGO ]" src="../static/summer.png" th:src="@{/summer.png}"></h1>
                    </div>
                    <div class="m-b"></div>
<!--                     <h4>欢迎使用 <strong>Summer 后台管理系统</strong></h4> -->
<!--                     <ul class="m-b"> -->
<!--                         <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> SpringBoot</li> -->
<!--                         <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> Mybatis</li> -->
<!--                         <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> Shiro</li> -->
<!--                         <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> Thymeleaf</li> -->
<!--                         <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> Bootstrap</li> -->
<!--                     </ul> -->
<!--                     <strong>还没有账号？ <a href="#">立即注册&raquo;</a></strong> -->
                </div>
            </div>
            <div class="col-sm-5">
                <form id="signupForm">
                    <h4 class="no-margins">登录：</h4>
<!--                     <p class="m-t-md">你若不离不弃，我必生死相依</p> -->
                    <input type="text"     name="username" class="form-control uname"     placeholder="用户名" value="admin"    />
                    <input type="password" name="password" class="form-control pword"     placeholder="密码"   value="admin123" />
					<div class="row m-t" th:if="${captchaEnabled==true}">
						<div class="col-xs-6">
	 					    <input type="text" name="validateCode" class="form-control code" placeholder="验证码" maxlength="5" autocomplete="off">
						</div>
						<div class="col-xs-6">
							<a href="javascript:void(0);" title="点击更换验证码">
								<img th:src="@{captcha/captchaImage(type=${captchaType})}" class="imgcode" width="85%"/>
							</a>
						</div>
					</div>
                    <div class="checkbox-custom" th:classappend="${captchaEnabled==false} ? 'm-t'">
				        <input type="checkbox" id="rememberme" name="rememberme"> <label for="rememberme">记住我</label>
				    </div>
                    <button class="btn btn-success btn-block" id="btnSubmit" data-loading="正在验证登录，请稍后...">登录</button>
                </form>
            </div>
        </div>
        <div class="signup-footer">
            <div class="pull-left">
                &copy; 2020 All Rights Reserved. Summer <br>
            </div>
        </div>
    </div>
<script th:inline="javascript"> var ctx = [[@{/}]]; var captchaType = [[${captchaType}]]; </script>
<!-- 全局js -->
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<!-- 验证插件 -->
<script src="../static/ajax/libs/validate/jquery.validate.min.js" th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script src="../static/ajax/libs/validate/messages_zh.min.js" th:src="@{/ajax/libs/validate/messages_zh.min.js}"></script>
<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script src="../static/ajax/libs/blockUI/jquery.blockUI.js" th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script src="../static/summer/js/summer-ui.js" th:src="@{/summer/js/summer-ui.js?v=4.0.0}"></script>
<script src="../static/summer/login.js" th:src="@{/summer/login.js}"></script>
<script>

	(function(a) {
    var e = a("#bg").children("canvas")
      , c = e[0]
      , o = e[1]
      , p = e[2]
      , g = {
        circle: {
            amount: 18,
            layer: 3,
            color: [157, 97, 207],
            alpha: 0.3
        },
        line: {
            amount: 12,
            layer: 3,
            color: [255, 255, 255],
            alpha: 0.3
        },
        speed: 0.5,
        angle: 20
    };
    if (c.getContext) {
        var d = c.getContext("2d"), m = o.getContext("2d"), n = p.getContext("2d"), r = window.Math, i = g.angle / 360 * r.PI * 2, f = [], q = [], v, u, t;
        requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function(w, x) {
            setTimeout(w, 1000 / 60)
        }
        ;
        cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame || window.msCancelAnimationFrame || window.oCancelAnimationFrame || clearTimeout;
        var s = function() {
            v = a(window).width();
            u = a(window).height(),
            e.each(function() {
                this.width = v;
                this.height = u
            })
        };
        var k = function(C, D, B, z, w) {
            var A = m.createRadialGradient(C, D, B, C, D, 0);
            A.addColorStop(0, "rgba(" + z[0] + "," + z[1] + "," + z[2] + "," + w + ")");
            A.addColorStop(1, "rgba(" + z[0] + "," + z[1] + "," + z[2] + "," + (w - 0.1) + ")");
            m.beginPath();
            m.arc(C, D, B, 0, r.PI * 2, true);
            m.fillStyle = A;
            m.fill()
        };
        var l = function(E, F, D, z, w) {
            var A = E + r.sin(i) * D
              , B = F - r.cos(i) * D
              , C = n.createLinearGradient(E, F, A, B);
            C.addColorStop(0, "rgba(" + z[0] + "," + z[1] + "," + z[2] + "," + w + ")");
            C.addColorStop(1, "rgba(" + z[0] + "," + z[1] + "," + z[2] + "," + (w - 0.1) + ")");
            n.beginPath();
            n.moveTo(E, F);
            n.lineTo(A, B);
            n.lineWidth = 3;
            n.lineCap = "round";
            n.strokeStyle = C;
            n.stroke()
        };
        var j = function() {
            d.clearRect(0, 0, v, u);
            var w = [];
            w[0] = d.createRadialGradient(v * 0.3, u * 0.1, 0, v * 0.3, u * 0.1, v * 0.9);
            w[0].addColorStop(0, "rgb(0, 26, 77)");
            w[0].addColorStop(1, "transparent");
            d.translate(v, 0);
            d.scale(-1, 1);
            d.beginPath();
            d.fillStyle = w[0];
            d.fillRect(0, 0, v, u);
            w[1] = d.createRadialGradient(v * 0.1, u * 0.1, 0, v * 0.3, u * 0.1, v);
            w[1].addColorStop(0, "rgb(0, 150, 240)");
            w[1].addColorStop(0.8, "transparent");
            d.translate(v, 0);
            d.scale(-1, 1);
            d.beginPath();
            d.fillStyle = w[1];
            d.fillRect(0, 0, v, u);
            w[2] = d.createRadialGradient(v * 0.1, u * 0.5, 0, v * 0.1, u * 0.5, v * 0.5);
            w[2].addColorStop(0, "rgb(40, 20, 105)");
            w[2].addColorStop(1, "transparent");
            d.beginPath();
            d.fillStyle = w[2];
            d.fillRect(0, 0, v, u)
        };
        var b = function() {
            var E = r.sin(i)
              , w = r.cos(i);
            if (g.circle.amount > 0 && g.circle.layer > 0) {
                m.clearRect(0, 0, v, u);
                for (var z = 0, C = f.length; z < C; z++) {
                    var A = f[z]
                      , H = A.x
                      , I = A.y
                      , D = A.radius
                      , F = A.speed;
                    if (H > v + D) {
                        H = -D
                    } else {
                        if (H < -D) {
                            H = v + D
                        } else {
                            H += E * F
                        }
                    }
                    if (I > u + D) {
                        I = -D
                    } else {
                        if (I < -D) {
                            I = u + D
                        } else {
                            I -= w * F
                        }
                    }
                    A.x = H;
                    A.y = I;
                    k(H, I, D, A.color, A.alpha)
                }
            }
            if (g.line.amount > 0 && g.line.layer > 0) {
                n.clearRect(0, 0, v, u);
                for (var B = 0, C = q.length; B < C; B++) {
                    var A = q[B]
                      , H = A.x
                      , I = A.y
                      , G = A.width
                      , F = A.speed;
                    if (H > v + G * E) {
                        H = -G * E
                    } else {
                        if (H < -G * E) {
                            H = v + G * E
                        } else {
                            H += E * F
                        }
                    }
                    if (I > u + G * w) {
                        I = -G * w
                    } else {
                        if (I < -G * w) {
                            I = u + G * w
                        } else {
                            I -= w * F
                        }
                    }
                    A.x = H;
                    A.y = I;
                    l(H, I, G, A.color, A.alpha)
                }
            }
            t = requestAnimationFrame(b)
        };
        var h = function() {
            f = [];
            q = [];
            if (g.circle.amount > 0 && g.circle.layer > 0) {
                for (var w = 0; w < g.circle.amount / g.circle.layer; w++) {
                    for (var x = 0; x < g.circle.layer; x++) {
                        f.push({
                            x: r.random() * v,
                            y: r.random() * u,
                            radius: r.random() * (20 + x * 5) + (20 + x * 5),
                            color: g.circle.color,
                            alpha: r.random() * 0.2 + (g.circle.alpha - x * 0.1),
                            speed: g.speed * (1 + x * 0.5)
                        })
                    }
                }
            }
            if (g.line.amount > 0 && g.line.layer > 0) {
                for (var y = 0; y < g.line.amount / g.line.layer; y++) {
                    for (var z = 0; z < g.line.layer; z++) {
                        q.push({
                            x: r.random() * v,
                            y: r.random() * u,
                            width: r.random() * (20 + z * 5) + (20 + z * 5),
                            color: g.line.color,
                            alpha: r.random() * 0.2 + (g.line.alpha - z * 0.1),
                            speed: g.speed * (1 + z * 0.5)
                        })
                    }
                }
            }
            cancelAnimationFrame(t);
            t = requestAnimationFrame(b);
            j()
        };
        a(document).ready(function() {
            s();
            h()
        });
        a(window).resize(function() {
            s();
            h()
        })
    }
}
)(jQuery);
	
</script>
</body>
</html>
